<template>
    <div class="box" style="b">
        <div class="header" id="headerL" style="background-color:#fff">
            <router-link to='/search' tag='section'  style="color:#e2e2e2" id="search"><aside class="iconfont icon-sousuo2"></aside><aside>请输入搜索关键字</aside></router-link>
        </div>
        <div class="content">
            <div class="kind">
                <div class="left">
                    <ul>
                        <li v-for="(item, index) of kindlist" :key='index' :class="isactive===index? 'active': ''" @click="getData(item,index)">{{item}}</li>
                    </ul>
                </div>
                <div class="right">
                    <Kind :list = brandlist />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import Kind from '@/components/Kind'
// import axios from 'axios'
// import Vue from 'vue'
export default {
  components: {
    Kind
  },
  data () {
    return {
    //   brandlist: [],
      isactive: 0
    }
  },
  computed: {
    ...mapState({
      kindlist: (state) => {
        return state.kind.kindlist
      },
      brandlist: (state) => {
        return new Set(state.kind.brandlist)
      }
    })
  },
  mounted () {
    this.$store.dispatch('getkindlist')
    // this.$store.dispatch('getbrandlist')
    this.$store.dispatch('getbrandlist', { item: '手机数码' })
  },
  methods: {
    getData (item, index) {
      console.log(this.$store)
      console.log(index)
      this.isactive = index
      console.log(this.isactive)
      this.$store.dispatch('getbrandlist', { item: item })
      console.log(item)
    }
  }
}
</script>

<style lang="scss">
.kind{
    width: 100%;
    height: 100%;
    display: flex;
    list-style: none;
    .left{
       width: 20%;
       border-right: 1px solid #e5e5e5;
       ul{
           overflow: auto;
        li{   border-radius: 5px;
              margin: 10px 0;
              font-weight: 700;
              font-family:'微软雅黑';
              font-size: 10px;
              display: flex;
              width:80%;
              margin-left: 10%;
              justify-content: center
           }
           .active{
              color: #d44d44;
              background: #f6ebea;
           }
       }
    }
    .right{
        height: auto;
        width: 80%;
        overflow: auto;
        .box{
            display: flex;
            flex-direction: column;
            h2{
          color: rgba(0,0,0,.8);
          font-size: 16px;
          font-weight: 700;
          line-height: 27px;
          margin: 10px 0;
          text-indent: 20px;
         }
        }
        .centent{
         ul{
             display: flex;
             li{
              width:85px;
              height:85px;
              img{
                  width: 85px;
                  height: 85px
              }
             }
         }
         p{
             overflow: auto;
             line-height: 14px;
         }
        }
    }
}
</style>
